import 'package:flutter/material.dart';
import './res/listData.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('循环遍历card组件'),
        ),
        body: const CardLayout(),
      ),
    );
  }
}

// class HomePage extends StatelessWidget {
//   const HomePage({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     return AspectRatio(
//       aspectRatio: 2 / 1,
//       child: Container(
//         color: Colors.red,
//       ),
//     );
//   }
// }

class CardLayout extends StatelessWidget {
  const CardLayout({super.key});

  List<Widget> _initCardData() {
    var tempList = listData.map((value) {
      return Card(
        shape:
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        elevation: 8,
        margin: const EdgeInsets.all(15),
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 16 / 9,
              child: Image.network(value["imageUrl"],
                fit: BoxFit.cover,
              ),
            ),
            ListTile(
              leading: ClipOval(
                  child: CircleAvatar(
                    radius: 20,
                    backgroundImage: NetworkImage(value["imageUrl"]),
                  )
              ),
              title: Text(value["title"]),
              subtitle: Text(value["author"]),
            )
          ],
        ),
      );
    });

    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _initCardData(),
    );
  }
}
